<template>
    <div class="my-money">
        <div class="navbar">
            <div class="to-back" @click="toBack"><van-icon name="arrow-left" />&nbsp;返回</div>
            <div class="title">我的钱包</div>
            <div class="empty"></div>
        </div>
        <div class="background-box"></div>
        <div class="money-box">
            <div class="describe">余额</div>
            <div class="money">
                <span>{{ money.toFixed(2) }}</span>&nbsp;元
            </div>
        </div>
        <div class="money-detail">
            <span><van-icon name="coupon" class="icon" />&nbsp;&nbsp;&nbsp;&nbsp;查看余额明细</span>
            <van-icon name="arrow" />
        </div>
        <div class="charge-money" @click="store.commit('meModule/changePopupState',true)">
            <span><van-icon name="add" class="icon"/>&nbsp;&nbsp;&nbsp;&nbsp;充&nbsp;值</span>
            <van-icon name="arrow" />
        </div>
    </div>


    <van-popup
    v-model:show="mask"
    @click-overlay="store.commit('meModule/changePopupState',false)"
    position="bottom"
    :style="{ height: '45%' }"
    >
    <div class="exit" @click="store.commit('meModule/changePopupState',false)">&times;</div>
    <div class="money-num">
        <van-radio-group v-model="checked">
                <van-radio 
                v-for="item in moneyNum" 
                :key="item.id"
                @click="radioState(item)"
                :name="item.id" checked-color="#ee0a24">{{ item.title }}</van-radio>
                <span class="custom" @click="custom">自定义金额</span>
            </van-radio-group>

            <van-field v-model="number" type="number" label="请输入金额"  v-show="showInput"/>
            <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" block @click="etc">
            立即充值
            </van-button>
    </div>
    </van-popup>
</template>


<script setup>
import { computed,ref,reactive, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex';
import {showToast,showSuccessToast,showLoadingToast } from 'vant'
import { addMoneyApi } from '../../apis/loginApi'

const router = useRouter()
const store = useStore()

let checked = ref(false)
let showInput = ref(false)
let number = ref()
let moneyNum = reactive([
    {id:'1',title:'50',state:false},
    {id:'2',title:'100',state:false},
    {id:'3',title:'200',state:false},
    {id:'4',title:'400',state:false},
    {id:'5',title:'500',state:false},
])

//用户信息
let user = computed(()=>store.getters['loginModule/getUserInfo'])
//金额
let money = computed(()=> store.getters['meModule/getMoney'])
//弹出框状态
let mask = computed(()=>store.getters['meModule/getPopupState'])

//存储余额所传递的数据
let info = reactive({
    phone:user.value.phone,
    money
})


onBeforeUnmount(async()=>{
    let {data} = await addMoneyApi(info)
    console.log(data);
})
function toBack(){
    router.back()
}

//自定义金额
function custom(){
    checked.value = false
    showInput.value = true
    moneyNum.forEach(item =>{
        item.state = false
    })
}

//单选框点击事件
function radioState(val){
    moneyNum.forEach(item =>{
        item.state = false
    })
    val.state = true
    showInput.value = false
}

//充值功能
function etc(){
    if(number.value > 5000 ){
        showToast({
        message: '每次最多充值5000',
        position: 'bottom',
        });
        return
    }
    let selectMoney = moneyNum.filter(item => item.state === true)
    if(selectMoney.length !== 0){
        showLoadingToast({
        message: '充值中...',
        forbidClick: true,
        });
        setTimeout(()=>{
            store.commit('meModule/addMoney',selectMoney[0].title)
            showSuccessToast('充值成功')
        },1500)
        
    }else{
        showLoadingToast({
        message: '充值中...',
        forbidClick: true,
        });
        setTimeout(()=>{
            store.commit('meModule/addMoney',number.value)
            showSuccessToast('充值成功')
        },1500)
    }
    showInput.value = false
    store.commit('meModule/changePopupState',false)
    
}

</script>


<style lang="less" scoped>
@import '../../style/common.less';


.my-money{
    display: block;
    position: relative;
    width: 100vw;
    height: 100vh;
    background: @g1;
    .navbar{
        height: 46px;
        background: #fa541c;
        color: #fff;
        padding: 0 16px;
        display: flex;
        justify-content: space-between;
        .to-back{
            // float: left;
            font-size: .7rem;
            line-height: 46px;
        }
        .title{
            // float: right;
            font-size: .8rem;
            font-weight: 600;
            line-height: 46px;
        }
        .empty{
            width: 10vw;
        }
    }
    .background-box{
        height: 20vh;
        margin-top: -1px;
        border-radius: 0 0 16px 16px;
        background: #fa541c;
    }
    .money-box{
        height: 26vh;
        padding: 10px;
        width: 88vw;
        margin: -17vh auto 50px;
        background: linear-gradient(#d4380d,#ff9c6e);
        border-radius: 20px;
        box-shadow: 10px 10px 20px rgba(0,0,0,.3);
        .describe{
            color: @g1;
            font-size: 1rem;
            margin: 10px 0 0 10px;
            margin-bottom: 3vh;
        }
        .money{
            color: @g1;
            text-align: center;
            font-size: 1.2rem;
            >span{
                font-size: 2.4rem;
            }
        }
    }
    .money-detail{
        box-sizing: border-box;
        background: @g1;
        width: 94vw;
        margin: 3vh auto;
        border-radius: 4px;
        padding: 6px 20px 6px 20px;
        height: 7vh;
        box-shadow: 2px 2px 6px rgba(0,0,0,.2);
        font-size: .8rem;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .charge-money{
        box-sizing: border-box;
        background: @g1;
        width: 94vw;
        margin: 2vh auto;
        border-radius: 4px;
        padding: 6px 20px 6px 20px;
        height: 7vh;
        box-shadow: 2px 2px 6px rgba(0,0,0,.2);
        font-size: .8rem;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
.exit{
    text-align: right;
    margin: 10px 20px;
    font-size: 1.6rem;
    color: @g7;
}

.money-num{
    >.van-radio-group{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px;
        >.van-radio{
            width: 33%;
            margin: 15px 0;
        }
        >.custom{
            display: block;
            line-height: 30px;
            text-align: center;
            width: 33%;
            margin: 15px 0;
            font-size: .8rem;
            font-weight: 600;
            color: #d4380d;
            border: 1px solid #d4380d;
            border-radius: 6px;
        }
    }
}

//图标颜色
.icon{
    color: #fa541c;
    font-size: 1rem;
}

//确认按钮定位
.van-button--default{
    position: absolute;
    bottom: 2px;
}
</style>